<template>
  <el-card style="margin-bottom: 16px">
    <el-row :gutter="16" align="middle">
      <el-col>
        <strong>时间范围：</strong>
      </el-col>
      <el-col>
        <el-select 
          :model-value="timeRange"
          @update:model-value="handleChange"
          style="width: 150px"
        >
          <el-option label="今天" value="today" />
          <el-option label="昨天" value="yesterday" />
          <el-option label="最近7天" value="last_7_days" />
          <el-option label="最近30天" value="last_30_days" />
          <el-option label="本月" value="this_month" />
          <el-option label="上月" value="last_month" />
        </el-select>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
interface Props {
  timeRange?: string
}

const props = defineProps<Props>()

const emit = defineEmits<{
  timeRangeChange: [value: string]
}>()

const handleChange = (value: string) => {
  emit('timeRangeChange', value)
}
</script>

<style scoped lang="scss">
// 样式可以在这里添加
</style>

